<template>
  <li>
    <span>
      {{ model.name }}
      <button v-if="hasChildren" @click="isOpen = !isOpen">
        {{ isOpen ? "收起" : "展开" }}
      </button>
    </span>

    <ul v-if="hasChildren && isOpen">
      <TreeItem v-for="item in model.children" :model="item" />
    </ul>
  </li>
</template>

<script>
export default {
  /**
   * name 选项的作用：
   *    1. 让 VueDevTools 选项该名字
   *    2. 组件要递归调用自己时，使用该选项
   *    3. 组件要给到 KeepAlive 组件的 include 或 exclude 配置时
   */
  name: "TreeItem",

  props: {
    model: Object,
  },

  data() {
    return {
      isOpen: false, // 是否展开子级
    };
  },

  computed: {
    // 是否有子级
    hasChildren() {
      return this.model.children && this.model.children.length > 0;
    },
  },
};
</script>
